 <template>
    <div id="newAssess">
        <div class="top">
            <ul class="top-ul">
                <li class="img"><img :src="imgUrl"></li>
                <li :class="flag==1 ? 'active' :'good'"><span @click="news"></span>好评</li>
                <li :class="flag==2 ? 'activeCenter' :'goodCenter'"><span @click="center"></span>中评</li>
                <li :class="flag==3 ? 'activeCenter' :'goodCenter'"><span @click="bag"></span>差评</li>
            </ul>
        </div>
        <div class="context">
            <textarea placeholder="评价一下商品吧，您的评价还能帮助到其他小伙伴哦～" v-model="assessVal"></textarea>
            <div class="uploadContainer">
                <div class="uploadImg">
                    <label  id='first' @click="uploadsImg($event)"></label>
                </div>
                <div class="uploadImg">
                    <label id="second" @click="uploadsImg($event)"></label>
                </div>
                <div class="uploadImg">
                    <label id="third" @click="uploadsImg($event)"></label>
                </div>
                <div class="uploadImg">
                    <label id="fourth" @click="uploadsImg($event)"></label>
                </div>
            </div>
        </div>
        <div class="xing">
            <div class="shopX"><img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/assess/shop@2x.png"><span>店铺评分</span></div>
            <div class="num" ref="describe" name="describe" >
                <h1>描述相符</h1>
                <span v-for="x in 5" class="noAssess" @click="changes($event)"></span>
            </div>
            <div class="num" ref="logistics" name="logistics">
                <h1>物流相符</h1>
                <span v-for="x in 5" class="noAssess" @click="changes($event)"></span>
            </div>
            <div class="num" ref="attitude" name="attitude">
                <h1>服务态度</h1>
                <span v-for="x in 5" class="noAssess" @click="changes($event)"></span>
            </div>
        </div>
        <button class="btn" @click="goSucc">提交</button>
    </div>
</template>
   
<script>
    import config from "../config/config.js";
    import share from "../share/share.js";
    export default{
        data(){
            return{
                flag:1,
                index:Number,
                imgUrl:String,
                assessVal:'',
                fair_level:0,
                logis_level:0,
                service_level:0,
                imgs:[]
            }
        },
        methods:{
            news(){
                this.flag = 1
            },
            center(){
                this.flag = 2
            },
            bag(){
                this.flag = 3
            },
            uploadsImg($event){
                var that=this;
                var id=$event.currentTarget.getAttribute('id');
                that.imgs.id=[];
                that.imgs.type=[];
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function (res) {
                        var localIds = res.localIds;
                        var UploadsImg=document.createElement('div'),
                            img=document.createElement('img'),
                            closeX=document.createElement('span');
                        closeX.setAttribute('style','background:url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/close_d.png);position: absolute;top: -.15rem;right: -.15rem;width: .34rem;height: .34rem;background-size:cover;');
                        img.setAttribute('src',localIds[0]);
                        img.setAttribute('style','width: 1.18rem;height: 1.18rem;border-radius: .08rem;');
                        UploadsImg.setAttribute('style','position: absolute;top: -1px;left: -1px;width: 1.18rem;height: 1.18rem;');
                        UploadsImg.appendChild(img);
                        UploadsImg.appendChild(closeX);
                        document.getElementById(id).appendChild(UploadsImg);
                        wx.uploadImage({
                            localId:localIds[0],
                            isShowProgressTips: 1,
                            success: function (res) {
                                var serverId = res.serverId;
                                that.imgs.push(serverId);
                                closeX.onclick=function($event){
                                    $event.stopPropagation();
                                    var __self=this;
                                    __self.parentNode.parentNode.removeChild(__self.parentNode);
                                    that.imgs.pop(serverId);
                                }
                            }
                        });

                    }
                });
            },
            goAssSucc(imgUrl,orderid,title){
                this.$router.push({
                    path:'/assSucc',
                    query:{
                        imgUrl:imgUrl,
                        orderid:orderid,
                        title:title
                    }
                })
            },
            goSucc(){
                var assessObj={
                    orderid:this.$route.query.orderid,
                    value:this.assessVal,
                    level:this.flag,
                    fair_level:this.fair_level,
                    logis_level:this.logis_level,
                    service_level:this.service_level,
                    imgs:this.imgs
                };

                var value=JSON.stringify({"orderid":assessObj.orderid,"value":assessObj.value,"level":assessObj.level,"fair_level":assessObj.fair_level,"logis_level":assessObj.logis_level,"service_level":assessObj.service_level,"imgs":assessObj.imgs,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Remark/PushRemark',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.goAssSucc(this.$route.query.imgUrl,this.$route.query.orderid,this.$route.query.title)
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            defualtStar(){

            },
            changes($event){
                var e=$event.currentTarget;
                var tagName=e.tagName;
                var index = [].indexOf.call(e.parentNode.querySelectorAll(e.tagName),e);
                var refName=e.parentNode.getAttribute('name');
                var refChildren=this.$refs[refName].getElementsByTagName(tagName);
                if(refName=='describe'){
                    this.fair_level=index+1;
                }else if(refName=='logistics'){
                    this.logis_level=index+1;
                } else if(refName=='attitude'){
                    this.service_level=index+1;
                }
                (function(index){
                    for(var z=0;z<5;z++){
                        refChildren[z].className='noAssess';
                         for(var i=0;i<index+1;i++){
                             refChildren[i].className='Assessed'
                       }
                    }

                })(index)


            }
        },
        activated(){
            this.imgUrl=this.$route.query.imgUrl;
            share({})
        },
        deactivated(){
            this.$destroy(true)
        }

    }
</script>

<style>
</style>